import { NodeSize } from '../config'

export default function propertyOutput(flow) {
  flow.register('PropertyOutput', ({ PolygonNode, PolygonNodeModel, h }) => {
    class Node extends PolygonNode {
      getIconShape() {
        return h(
          'svg',
          {
            width: NodeSize,
            height: NodeSize,
            viewBox: '0 0 1024 1024'
          },
          h(
            'path',
            {
              fill: '#3D6480',
              d: 'M126.73219 282.233905l155.745524-0.024381V127.926857H236.129524V203.093333L108.763429 75.727238 76.01981 108.495238l127.366095 127.390476H126.73219z'
            }
          ),
          h(
            'path',
            {
              fill: '#EFF9FE',
              d: 'M724.114286 804.473905l-1.414096-595.18781H473.84381l-105.667048 105.667048h54.637714v19.529143h-59.465143v-14.701715l-70.631619 70.631619v414.037334H724.114286z m-232.521143-489.520762h161.962667v19.529143h-161.962667v-19.529143z m0 92.233143h161.962667v19.529143h-161.962667v-19.529143z m0 92.184381h161.962667v19.529143h-161.962667v-19.529143z m0 92.184381h161.962667v19.529142h-161.962667v-19.529142z m-128.24381-184.368762h59.465143v19.529143h-59.465143v-19.529143z m0 92.184381h59.465143v19.529143h-59.465143v-19.529143z m0 92.184381h59.465143v19.529142h-59.465143v-19.529142z'
            }
          ),
          h(
            'path',
            {
              fill: '#3D6480',
              d: 'M764.050286 167.862857H515.267048l-41.423238 41.423238h248.85638l1.414096 595.18781H292.717714V390.436571l-41.447619 41.447619v414.012953h514.389334z'
            }
          ),
          h(
            'path',
            {
              fill: '#3D6480',
              d: 'M363.349333 407.186286h59.465143v19.529143h-59.465143zM491.593143 407.186286h161.962667v19.529143h-161.962667zM363.349333 499.370667h59.465143v19.529143h-59.465143zM491.593143 499.370667h161.962667v19.529143h-161.962667zM363.349333 591.555048h59.465143v19.529142h-59.465143zM491.593143 591.555048h161.962667v19.529142h-161.962667zM422.814476 334.482286v-19.529143h-54.637714l-4.827429 4.851809v14.677334zM491.593143 314.953143h161.962667v19.529143h-161.962667z'
            }
          )
        )
      }

      getLabelShape() {
        return h(
          'text',
          {
            fill: '#000000',
            fontSize: 12,
            x: NodeSize / 2,
            y: NodeSize + 20,
            textAnchor: 'middle',
            dominantBaseline: 'middle'
          },
          '配置文件输出'
        )
      }

      getShape() {
        const { x, y, width, height } = this.getAttributes()
        const transform = `matrix(1 0 0 1 ${x - width / 2} ${y - height / 2})`
        return h(
          'g',
          {
            transform
          },
          [
            h(
              'rect',
              {
                rx: 5,
                ry: 5,
                width: NodeSize,
                height: NodeSize,
                fill: '#fff',
                stroke: '#3D6380',
                strokeWidth: 1
              }
            ),
            this.getIconShape(),
            this.getLabelShape()
          ]
        )
      }
    }
    class Model extends PolygonNodeModel {
      constructor(data, graphModel) {
        super(data, graphModel)
        this.points = [
          [NodeSize / 2, 0],
          [NodeSize, NodeSize / 2],
          [NodeSize / 2, NodeSize],
          [0, NodeSize / 2]
        ]
      }
    }

    return {
      view: Node,
      model: Model
    }
  })
}
